/*
  使用Context来跨组价通信，让App组件-直接传数据给SonSon组件
  1. React.createContext创建上下文, 解构出两个组件
  2. 使用Provider组件，传数据: 设置value属性传数据
  3. 使用Consumer组件，接收数据
      接受一个函数，返回需要返回一端JSX，形参就是Provider传来的数据
*/
import React from 'react';

// 解构：Provider组件提供数据，Consumer组件接受数据
const { Provider, Consumer } = React.createContext();
// 类组件
class APP extends React.Component {
  render() {
    return (
      <div>
        <h1>父组件</h1>
        {/* 传递数据：设置value属性传数据 */}
        <Provider value="我是Provider提供的字符串">
          <Son></Son>
        </Provider>
      </div>
    );
  }
}

const Son = () => {
  return (
    <div>
      <h2>儿子组件</h2>
      <SonSon></SonSon>
    </div>
  );
};
const SonSon = () => {
  return (
    <div>
      <h2>孙子组件</h2>
      {/* 通过Consumer接收数据 */}
      {/* 接收一个函数，返回需要返回的一个JSX数据即可 */}
      <Consumer>
        {(data) => {
          return <h3>我是Consumer获取到的数据----{data}</h3>;
        }}
      </Consumer>
    </div>
  );
};

export default APP;
